<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
    <style>
        .basic {
            height: 100px;
            border: 2px black solid;
        }
        .atguigu1{
            background-color: red;
        }
        .atguigu2{
            background-color: green;
        }
        .atguigu3{
            background-color: blue;
        }
        .two{
            font-size: 30px;
        }
        .three{
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click=" changeMood">{{name}}</div> <br /><br />
        <!-- 绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
        <div class="basic" :class="classArr">{{name}}</div> <br /><br />
        <!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="class0bj">{{name}}</div>
    </div>

</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            name: '中国!',
            mood: 'normal',
            // 数组写法,数组内为字符串，类名的集合
            classArr: ['atguigu2', 'two', 'three'],
            // 对象写法,{类名：true/false},false表示禁用，trua表示使用
            class0bj: {
                atguigu3: true,
                two: false,
                three:true
            }
        },
        methods: {
            // 字符串写法,methods中为函数，英勇a(){}形式
            changeMood(){
                this.mood='atguigu1'
            }

        }
    })

</script>

</html>